<template>
  <div>
    <header class="header">
      <!-- 头部的第一行 -->
      <div class="top">
        <div class="container">
          <div class="loginList">
            <p>尚品汇欢迎您！</p>
            <p v-if="!userName">
              <span>请</span>
              <router-link to="/login">登录</router-link>
              <router-link to="/register" class="register">免费注册</router-link>
            </p>
            <p v-else>
              <span>{{userName}}</span>
              <span class="register" @click="outLogin">退出登入</span>
            </p>
          </div>
          <div class="typeList">
            <router-link to="/center/myorder">我的订单</router-link>
            <router-link to="/shopcart">我的购物车</router-link>
            <a href="###">我的尚品汇</a>
            <a href="###">尚品汇会员</a>
            <a href="###">企业采购</a>
            <a href="###">关注尚品汇</a>
            <a href="###">合作招商</a>
            <a href="###">商家后台</a>
          </div>
        </div>
      </div>
      <!--头部第二行 搜索区域-->
      <div class="bottom">
        <h1 class="logoArea">
          <router-link class="logo" title="尚品汇" to="/">
            <!-- target="_blank" 新件跳转 -->
            <img src="./images/logo.png" alt="">
          </router-link>
        </h1>
        <div class="searchArea">
          <form action="###" class="searchForm">
            <input v-model="keyword" type="text" id="autocomplete" class="input-error input-xxlarge" />
            <button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">搜索</button>
          </form>
        </div>
      </div>
    </header>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        keyword: ""
      }
    },
    methods: {
      //退出登录
   async  outLogin(){
        try{
      await  this.$store.dispatch('user/userLogout')
        }catch(e){
          //TODO handle the exception
        }
          
      },
      goSearch() {
        console.log(this.$store.state.count)
        //路由传参
        //第一种字符串型
        // this.$router.push('/search/' + this.keyword + "?k=" + this.keyword.toUpperCase())
        //第二种模板字符串
        //this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
        //第三中 对象  path写法不能和params一起使用
        //this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})
        //如何指定params参数可传不可传
        //在配置路由的时候，params参数占位了,但是路由跳转时不传递，路径就会出现问题
        //如过路由要求传递params参数但是你就是不传递params参数，url就会有问题
        //如何指定//params参数可传不可传 ，在配置路由的时候，在占位后面加上一个问号?
        //this.$router.push({name: 'search',query: {	k: this.keyword.toUpperCase()	}})
        //params参数可传不可传 但是params传的是空的，如何解决
        let location = {
          name: 'search',
          params: {
            keyword: this.keyword || undefined
          }
        }
        if (this.$route.query) {
          location.query = this.$route.query
        }

        this.$router.push(location)
      }
    },
    mounted() {
      this.$bus.$on("clear", () => {
        this.keyword = ""
      })
    },
    computed:{
      userName(){
        return  this.$store.state.user.userInfo.name
      }
    }
  }
</script>

<style scoped lang="less">
  .header {
    &>.top {
      background-color: #eaeaea;
      height: 30px;
      line-height: 30px;

      .container {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;

        .loginList {
          float: left;

          p {
            float: left;
            margin-right: 10px;

            .register {
              border-left: 1px solid #b3aeae;
              padding: 0 5px;
              margin-left: 5px;
            }
          }
        }

        .typeList {
          float: right;

          a {
            padding: 0 10px;

            &+a {
              border-left: 1px solid #b3aeae;
            }
          }

        }

      }
    }

    &>.bottom {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      .logoArea {
        float: left;

        .logo {
          img {
            width: 175px;
            margin: 25px 45px;
          }
        }
      }

      .searchArea {
        float: right;
        margin-top: 35px;

        .searchForm {
          overflow: hidden;

          input {
            box-sizing: border-box;
            width: 490px;
            height: 32px;
            padding: 0px 4px;
            border: 2px solid #ea4a36;
            float: left;

            &:focus {
              outline: none;
            }
          }

          button {
            height: 32px;
            width: 68px;
            background-color: #ea4a36;
            border: none;
            color: #fff;
            float: left;
            cursor: pointer;

            &:focus {
              outline: none;
            }
          }
        }
      }
    }
  }
</style>
